<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container" :class="isShow?'white':'black'">
        <div class="header">

            <!-- <div class="changeBackgrounddiv" @click="changeisShow">{{isShow}}</div> -->
            <input type="button" :value="dayNumber[index]" class="changeBackground" @click="changeisShow">
            <ul class="header_ul">
                <li class="introduction">
                    <a href="#"> 狗狗百科</a>
                    <ul class="introductionul">
                        <li><a href="">起源</a></li>
                        <li><a href="">生病</a></li>
                        <li><a href="">禁忌</a></li>
                    </ul>
                </li>

                <li class="select">
                    <a href=""> 狗狗挑选</a>
                    <ul class="selectul">
                        <li><a href="">金毛</a></li>
                        <li><a href="">二哈</a></li>
                        <li><a href="">柯基</a></li>
                    </ul>
                </li>

                <li class="doctor">
                    <a href=""> 狗狗医生</a>
                    <ul class="doctorul">
                        <li><a href="">李医生</a></li>
                        <li><a href="">冯医生</a></li>
                        <li><a href="">宋医生</a></li>
                    </ul>
                </li>

                <li class="music">
                    <a href=""> 娱乐一下</a>
                    <ul class="musicul">
                        <li><a href="../looking_you/html.html">看着你</a></li>
                        <li><a href="../弹珠小游戏/index.html">弹珠小游戏</a></li>
                        <li><a href="">小狗嘤嘤</a></li>
                    </ul>
                </li>
                <div class="nav-box"></div>
            </ul>
        <!-- <form action="#" class="login-form">
            <h2>LOGIN</h2>
            <input type="text" name="useName" placeholder="Input User">
            <input type="text" name="Password" placeholder="Input Password">
            <button type="submit">login</button>
        </form> -->
    </div>
    <script>
      let vm =  new Vue({
            el: '.container',
            data:{
                isShow:true,
                index: 0,
                dayNumber:[
                    'white',
                    'black'
                ]
            },
            methods: {
                changeisShow(){
                    this.isShow=!this.isShow;
                    if(this.isShow===true){
                        this.index=0;
                    }else{
                        this.index=1;
                    }
                    console.log('改变了isshow  '+this.isShow +'  '+this.index);
                }
            },
        })
        </script>

</body>
</html>